import React, { ReactNode } from "react";
import {
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from "react-native";
import { useTheme } from "@/contexts/ThemeContext";

export interface MenuItemComponentProps {
  // 基本属性
  /** 菜单项显示的文本 */
  label?: string;
  /** 点击回调函数 */
  onPress?: () => void;
  /** 是否禁用此菜单项 */
  disabled?: boolean;

  // 样式相关
  /** 菜单项容器样式 */
  style?: StyleProp<ViewStyle>;
  /** 菜单项文本样式 */
  textStyle?: StyleProp<TextStyle>;
  /** 文本颜色 */
  color?: string;

  // 图标相关
  /** 左侧图标组件 */
  leftIcon?: ReactNode;
  /** 右侧图标组件 */
  rightIcon?: ReactNode;

  // 子元素(完全自定义内容)
  /** 自定义子元素，将替代默认渲染 */
  children?: ReactNode;
}

/**
 * @author BelovedLYC
 * 菜单项组件 - 用于构建菜单中的单个选项
 *
 * @component
 * @example
 * ```tsx
 * // 基本用法
 * <MenuItem
 *   label="设置"
 *   onPress={() => handlePress('settings')}
 * />
 *
 * // 带图标的菜单项
 * <MenuItem
 *   label="历史记录"
 *   leftIcon={<Ionicons name="time-outline" size={20} color="#333" />}
 *   onPress={() => handlePress('history')}
 * />
 *
 * // 自定义样式和颜色
 * <MenuItem
 *   label="删除会话"
 *   leftIcon={<Ionicons name="trash-outline" size={20} color="#e63946" />}
 *   color="#e63946"
 *   onPress={() => handlePress('delete')}
 *   style={{ borderTopWidth: 1, borderTopColor: '#eee' }}
 * />
 *
 * // 禁用的菜单项
 * <MenuItem
 *   label="高级功能"
 *   leftIcon={<Ionicons name="diamond-outline" size={20} color="#999" />}
 *   disabled={true}
 * />
 *
 * // 带右侧图标
 * <MenuItem
 *   label="更多选项"
 *   leftIcon={<Ionicons name="options-outline" size={20} color="#333" />}
 *   rightIcon={<Ionicons name="chevron-forward" size={16} color="#777" />}
 * />
 *
 * // 完全自定义内容
 * <MenuItem>
 *   <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 *     <Text>自定义内容</Text>
 *     <Badge value="新" />
 *   </View>
 * </MenuItem>
 * ```
 */
const MenuItem: React.FC<MenuItemComponentProps> = ({
  label,
  onPress,
  disabled = false,
  style,
  textStyle,
  color,
  leftIcon,
  rightIcon,
  children,
}) => {
  const { colors } = useTheme();
  const textColor = color || colors.text.primary;

  return (
    <TouchableOpacity
      style={[styles.container, style]}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={0.7}
    >
      {children ? (
        // 如果有children，则直接渲染children
        children
      ) : (
        // 否则渲染默认的菜单项布局
        <View style={styles.content}>
          {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}

          {label && (
            <Text
              style={[
                styles.label,
                { color: textColor },
                disabled && { color: colors.text.disabled },
                textStyle,
              ]}
              numberOfLines={1}
            >
              {label}
            </Text>
          )}

          {rightIcon && <View style={styles.rightIcon}>{rightIcon}</View>}
        </View>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    backgroundColor: "transparent",
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
  },
  leftIcon: {
    marginRight: 10,
  },
  rightIcon: {
    marginLeft: 10,
  },
  label: {
    fontSize: 16,
    flex: 1,
  },
  disabledText: {
    // Replaced by inline style
  },
});

export default MenuItem;
